<link rel="stylesheet" href="../public/all/css/jquery.marquee.min.css">
<script src="../public/all/js/jquery.marquee.min.js"></script>

<div class="userinfo">
    <img src="images/money.png" style="width:0.8rem;">&nbsp;<span class="money"></span>

    <div class="name">
        <img src="images/userinfo.png" style="width:0.8rem;">&nbsp;<span class="uid"></span>
    </div>

    <div class="button2">
        <button class="charge">充值</button>
        <button class="take">提现</button>
    </div>
</div>
<div class="note">
    <ul id="marquee" class="marquee"><li></li></ul>
</div>

<!-- 游戏列表 -->
<div class="game-list">
    <ul class="am-avg-sm-2 for-scroll">
    </ul>
</div>

<!-- 弹出菜单 -->
<div id="drop-menus" class="hide">
    <div class="bg"></div>
    <div class="list">
        <a href="#" class="jszd">
            即时注单
            <span class="weijie">(--)</span>
        </a>
        <a href="#" class="today">今日已结</a>
        <a href="#" class="bet">下注记录</a>
        <a href="#" class="result">开奖结果</a>
        <a href="#" class="take">提现</a>
    </div>
</div>

<style type="text/css">
    .userinfo {
        line-height: 26px;
        height: 44px;
        text-align: center;
        color: #fff;
        font-size: 0.7rem;
        line-height: 22px;
        padding: 8px 10px 8px 10px;
        background-color: rgba(0, 0, 0, 0.08);
        position: relative;
        border-bottom: 1px solid rgba(255,255,255,0.26);
    }
    .userinfo .name {
        position: absolute;
        left: 5px;
        top: 8px;
    }
    .userinfo .button2 {
        position: absolute;
        right: 5px;
        top: 8px;
        width: 200px;
        text-align: right;
    }
    .userinfo button {
        background-color: rgba(250, 252, 250, 0.01);
        line-height: 26px;
        color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        font-weight: normal;
        font-size: 0.7rem;
        padding: 0px 5px 0px 5px;
        margin-left: 5px;
        box-shadow: inset 1px 1px 0 rgba(250,250,250,.22);
    }
    .note {
        height: 36px;
        overflow: hidden;
        margin: 0px 15px 0px 15px;
    }
    #marquee {
        line-height: 20px;
        height: 30px;
    }
    #marquee .marquee-showing {
        height: 30px;
    }
    ul.marquee li {
        font-size: 0.8rem !important;
        color: rgba(0, 0, 0, 0.74);
    }

    .game-list {
        position: absolute;
        top: 100px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        overflow: hidden;
        margin: -15px 5px 0px 5px;
    }
    .game-list li {
        text-align: center;
    }
    .game-list li .item {
        height: 118px;
        margin: 0px 10px 20px 10px;
        background-color: rgba(255,255,255,0.19);
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.29);
        box-shadow: 0 5px 4px -1px rgba(0,0,0,.1);
        text-align: center;
    }
    .game-list li .title {
        font-size: 0.8rem;
        font-weight: bold;
        color: #fff;
        line-height: 60px;
    }
    .game-list li .cd {
        display: inline-block;
        min-width: 70px;
        color: #fff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255,255,255,.08);
        border-radius: 5px;
        margin: auto;
        font-weight: 700;
        line-height: 30px;
        font-size:16px; 
    }

    #drop-menus {
        position: fixed;
        left: 0px;
        top: 0px;
        bottom: 0px;
        right: 0px;
        font-size: 16px;
        z-index: 99999;
    }
    #drop-menus .bg {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
        z-index: 100000;
    }
    #drop-menus .list {
        position: absolute;
        top: 42px;
        right: 5px;
        width: 100px;
        z-index: 100001;
        background-color: #fff;
        text-align: center;
    }
    #drop-menus .list a {
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
        line-height: 20px;
        padding: 7px;
        color: #000;
        font-weight: bold;
    }
    #drop-menus .list .jszd span {
        color: red;
        display: block;
    }
</style>

<script>
    $(".back2game").hide();
    $(".home").show();
    $(".home").click(function() {
        Util.jumpUrl({
            file: 'index.html'
        });
    });

    $("#drop-menus .jszd").click(function() {
        Util.jumpUrl({
            cmd: "jishi",
            back: "gamecenter"
        });
    })
    $("#drop-menus .today").click(function() {
        Util.jumpUrl({
            cmd: "today",
            back: "gamecenter"
        });
    })
    $("#drop-menus .bet").click(function() {
        if (context.user && context.user.user && context.user.user.mobile) {
            Util.jumpUrl({
                cmd: 'bet',
                back: "gamecenter",
            });
        }
        else {
            alert2("试玩账号无权访问，请先注册");
        }
    })
    $("#drop-menus .result").click(function() {
        Util.jumpUrl({
            cmd: "result",
            back: "gamecenter"
        });
    })
    $("#drop-menus .take").click(function() {
        if (context.user && context.user.user && context.user.user.mobile) {
            Util.jumpUrl({
                cmd: 'charge',
                n: 'take',
                back: "gamecenter",
            });
        }
        else {
            alert2("试玩账号无权访问，请先注册");
        }
    })

    ME.cb = function() {
        drawUserInfo();
    };
    ME.query(function() {
        draw_game_menus();
        loopLottery();
        setInterval(function() {
            loopLottery();
        }, 1000);
    });

    function drawUserInfo() {
        if (context.user && context.user.user) {
            $(".userinfo .name span").html((context.user.user.mobile || '游客'));
            $(".userinfo .money").html((context.user.balance/100).toFixed(2));
        }
    }
    drawUserInfo();

    // 滚动
    var _scroll = new IScroll(".game-list", {
        scrollX: false,
        scrollY: true,
        click: true,
    });

    // 获取游戏列表
    GameList.pull(function() {
        draw_game_menus();
    });


    // 绘制游戏列表
    function draw_game_menus() {
        var ul = $(".game-list ul");
        var list = GameList.menus;
        var menuTemplate = '<li value="__value__"><div class="item"><div class="title">__name__</div><div class="cd">--</div></div></li>';

        ul.empty();
        for (var i = 0; i < list.length; i++) {
            var item = menuTemplate.replace(/__value__/, list[i].game);
            item = item.replace(/__name__/, get_game_display_name(list[i].game));
            ul.append(item);
        }
        var arr = $(".game-list li");
        for (var i = 0; i < arr.length; i++) {
            $(arr[i]).click(function(e) {
                Util.jumpUrl({
                    file: 'main2.html',
                    game: $(e.currentTarget).attr("value")
                });
            });
        }
        _scroll.refresh();
    }

    // 定期刷新封盘时间
    var currInfos = {};
    function drawCurrTime(type, r) {
        var issue = r.issue, open = r.open, end = r.end;
        var div = $("li[value='" + type + "'] .cd");
        if (!issue) {
            div.html("--");
            return;
        }
        currInfos[type] = r;

        var t = end/1000 - new Date().getTime()/1000;
        if (t >= 3600) {
            div.html(Math.floor(t/3600) + '小时');
            return;
        }
        if (t > 0) {
            var i1 = parseInt(t/60), i2 = Math.ceil(t % 60);
            i1 = i1 < 10 ? "0" + i1 : i1;
            i2 = i2 < 10 ? "0" + i2 : i2;
            div.html(i1 + ":" + i2);
            return;
        }
        
        div.html("封盘");
    }
    function refreshCurr(type) {
        CMD.lottery_next(type, function(r) {
            drawCurrTime(type, r);
        });
    }
    function loopLottery() {
        var games = get_game_list();
        for (var i in games) {
            if (!currInfos[games[i]]) {
                refreshCurr(games[i]);
                continue;
            }
            drawCurrTime(games[i], currInfos[games[i]]);
            if (currInfos[games[i]].open - new Date().getTime() <= 0) {
                refreshCurr(games[i]);
                continue;
            }
        }
    }

    // 公告
    Classify.queryExt("settings", "board", true, "[]", function(v) {
        var m = $("#marquee"); m.empty();
        for (var i in v) {
            var d = v[i];
            var li = $("<li></li>");
            li.append(d.content);
            m.append(li);
        }

        // 实现公告的滚动效果
        $(document).ready(function() {
            if ($("#marquee").marquee)
                $("#marquee").marquee({
                    pauseSpeed: 4000,
                    scrollSpeed: 30,
                    showSpeed: 250,
                });
        });
    });
    
    $("button.charge").click(function() {
        if (context.user && context.user.user && context.user.user.mobile) {
            Util.jumpUrl({
                cmd: 'charge',
                n: "",
                back: "gamecenter",
            });
        }
        else {
            alert2("试玩账号无权访问，请先注册");
        }
    });
    $("button.take").click(function() {
        if (context.user && context.user.user && context.user.user.mobile) {
            Util.jumpUrl({
                cmd: 'charge',
                n: 'take',
                back: "gamecenter",
            });
        }
        else {
            alert2("试玩账号无权访问，请先注册");
        }
    });

    $("#drop-menus .bg").click(function() {
        $("#drop-menus").hide();
    })
    $("#center-top i.menu").click(function() {
        // 设置即时注单的数据
        Lottery.refresh_uncheck(function() {
            $("#drop-menus .weijie").html("(" + (query_uncheck_bets_total()/100).toFixed(2) + ")");
        })
        $("#drop-menus").show();
    })
    $("#center-top i.menu").show();
    $("#center-top i.home").show();
    $("#center-top i.back").hide();

    $(".userinfo .name").click(function() {
        Util.jumpUrl({
            cmd: 'index',
        })
    })
</script>